import React from 'react'
import { defineComponent, toRefs, reactive, watch, ref, onMounted } from 'vue'
import 'amis/sdk/sdk.js'
import 'amis/sdk/sdk.css'
import 'amis/sdk/iconfont.css'
import 'amis/sdk/helper.css'
import 'amis/sdk/rest.js'
import 'amis/sdk/tinymce.js'

import 'amis/lib/themes/default.css'
import 'amis/lib/helper.css'
import 'amis-ui/lib/themes/antd.css'

import { useRouter } from 'vue-router'
import { getAccessToken } from '@/utils/auth'

import {service} from '@/config/axios/service'
import axios from 'axios'
import qs from 'qs'
const props = {
  schema: {
    type: Object,
    value: () => { },
  },
  env: {
    type: Object,
    default: () => ({}),
  },
}
const amis = amisRequire('amis/embed')
const amisLib = amisRequire('amis')
class AmisRenderer extends React.Component {
  state = {
    amisLib: null,
    amisInstance: null,
  }
  componentDidMount() {
    
    console.log('this.props',this.props)
    const { schema } = this.props
    const amisInstance = amis.embed(
      '#preview',
      schema,
      {},
      {
        fetcher,
      }
    )
    this.setState({hen
      amisInstance,
    })
  }
  componentWillUnmount() {
    this.amisInstance?.unmount()
  }
  render() {
    return <div id="preview"></div>
  }
}

export default AmisRenderer
// export default defineComponent({
//   props,
//   emits: ['ready'],
//   setup(props, ctx) {
//     const router = useRouter()
//     const common = reactive({})

//     const renderBox = ref('renderBox')
//     const location = () => {
//       const current = router.currentRoute.value
//       return {
//         pathname: current.path,
//         hash: current.hash,
//         query: current.query,
//         search: `?${qs.stringify(current.query)}`,
//       }
//     }
//     const hanldeNext = () => {
//       // window.open('#/editor', '_blank')
//     }
//     watch(
//       () => props.schema,
//       () => {

//       }
//     )
//     const getList = () => {
//       // @ts-ignore
//       const scoped = amisRequire('amis/embed')

//       // @ts-ignore
//       const { normalizeLink } = amisRequire('amis')
//       const instance = scoped.embed(
//         renderBox.value,
//         props.schema,
//         {
//           // 这里是初始 props，一般不用传。
//           // locale: 'en-US' // props 中可以设置语言，默认是中文
//           // theme: 'ant'
//         },
//         {
//            // 下面三个接口必须实现
//            fetcher: ({
//             url, // 接口地址
//             method, // 请求方法 get、post、put、delete
//             data, // 请求数据
//             responseType,
//             config, // 其他配置
//             headers // 请求头
//           }: any) => {
//             config = config || {};
//             config.withCredentials = true;
//             responseType && (config.responseType = responseType);

//             if (config.cancelExecutor) {
//               config.cancelToken = new (axios as any).CancelToken(
//                 config.cancelExecutor
//               );
//             }
         
//             config.headers = {...headers,Authorization:'Bearer ' + getAccessToken() } || {};

//             if (method !== 'post' && method !== 'put' && method !== 'patch') {
//               if (data) {
//                 config.params = data;
//               }

//               return (axios as any)[method](url, config);
//             } else if (data && data instanceof FormData) {
//               config.headers = config.headers || {};
//               config.headers['Content-Type'] = 'multipart/form-data';
//             } else if (
//               data &&
//               typeof data !== 'string' &&
//               !(data instanceof Blob) &&
//               !(data instanceof ArrayBuffer)
//             ) {
//               data = JSON.stringify(data);
//               config.headers = config.headers || {};
//               config.headers['Content-Type'] = 'application/json';
//             }

//             return (axios as any)[method](url, data, config);
//           },
//           // requestAdaptor(api) {
//           //   console.log(api)
//           //   api.headers.a= 1
//           //   // api.url = urls+api.url
//           //   // 支持异步，可以通过 api.mockResponse 来设置返回结果，跳过真正的请求发送
//           //   // 此功能自定义 fetcher 的话会失效
//           //   // api.context 中包含发送请求前的上下文信息
//           //   return api;
//           // },
//           // responseAdaptor(api, payload, query, request, response) {
//           //   console.log(payload)

//           //   return payload;
//           // },
//           theme: 'antd',
//           // 覆盖 amis env
//           // 参考 https://aisuda.bce.baidu.com/amis/zh-CN/docs/start/getting-started#sdk
//           jumpTo: (to: any, action: any) => {
//             if (to === 'goBack') {
//               return router.go(-1)
//             }

//             to = normalizeLink(to, location())

//             if (action?.actionType === 'url') {
//               action.blank === false ? router.push(to) : window.open(to)
//               return
//             }

//             // 主要是支持 nav 中的跳转
//             if (action && to && action.target) {
//               window.open(to, action.target)
//               return
//             }

//             if (/^https?:\/\//.test(to)) {
//               window.location.replace(to)
//             } else {
//               router.push(to)
//             }
//           },

//           updateLocation: (location: any, replace: any) => {
//             if (location === 'goBack') {
//               return router.go(-1)
//             }
//             location = normalizeLink(location, location())
//             replace ? router.replace(location) : router.replace(location)
//           },
//           ...props.env,
//         },
//         () => {
//           ctx.emit('ready', {
//             instance,
//           })
//         }
//       )
//     }
//     onMounted(() => {
//       getList()
//     })
//     return {
//       ...toRefs(common),
//       hanldeNext,
//       props,
//       renderBox,
//     }
//   },
//   render() {
//     return <div ref="renderBox" id="renderBox"></div>
//   },
// })
